<template>
  <ToolbarItemContainer ref="container" :iconFile="Icon" title="发送资料" :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'"
    @onDialogShow="onDialogShow" @onDialogClose="onDialogClose">
    <div :class="['fileBox', !isPC && 'file-h5']">
      <div :class="['file-header', !isPC && 'file-h5-header']">
        <span :class="['file-header-title', !isPC && 'file-h5-header-title']">选择文件类型</span>
        <span v-if="!isPC" :class="['file-header-close', !isPC && 'file-h5-header-close']" @click="closeDialog">
          关闭
        </span>
      </div>
      <div :class="['file-list', !isPC && 'file-h5-list']" class="bg">
        <ImageUpload imageSourceType="album" />
        <!-- <ImageUpload imageSourceType="camera" /> -->
        <VideoUpload videoSourceType="album" />
        <!-- <VideoUpload videoSourceType="camera" /> -->
        <!-- <DFile /> -->
      </div>
    </div>
  </ToolbarItemContainer>
</template>
<script setup lang="ts">
import {
  TUITranslateService,
  TUIStore,
  StoreName,
  IConversationModel,
  SendMessageParams,
  TUIChatService,
} from '@tencentcloud/chat-uikit-engine'

import { ref, onMounted } from '@/TUIKit/adapter-vue'
import ToolbarItemContainer from '@/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue'
import { isEnabledMessageReadReceiptGlobal } from '@/TUIKit/components/TUIChat/utils/utils'
import { isPC, isUniFrameWork } from '@/TUIKit/utils/env'
import Icon from '@/TUIWidget/static/icon/file.png'

import ImageUpload from '@/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue'
import VideoUpload from '@/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue'
// import DFile from '../d-file/index.vue'

import { getDoctorCommonRepliesPage } from '@/api/commonTools'

const emits = defineEmits(['onDialogPopupShowOrHide'])
const currentConversation = ref<IConversationModel>()
const container = ref()
const wordsList = ref([])

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation
  },
})

const selectWord = (item: any) => {
  const options = {
    to:
      currentConversation?.value?.groupProfile?.groupID ||
      currentConversation?.value?.userProfile?.userID,
    conversationType: currentConversation?.value?.type,
    payload: {
      text: item.content,
    },
    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  } as SendMessageParams
  TUIChatService.sendTextMessage(options)
  // close dialog after submit evaluate
  container?.value?.toggleDialogDisplay(false)
}

const closeDialog = () => {
  container?.value?.toggleDialogDisplay(false)
}

const onDialogShow = () => {
  emits('onDialogPopupShowOrHide', true)
}

const onDialogClose = () => {
  emits('onDialogPopupShowOrHide', false)
}

onMounted(async () => {
  wordsList.value = (await getDoctorCommonRepliesPage()).data.list
})
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
<style scoped lang="scss">
.fileBox {
  padding: 30rpx;
  background-color: #ebf0f6 !important;

  .file-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;

    .file-header-title {
      font-size: 18px;
      line-height: 40px;
    }
  }

  .file-list {
    display: flex;
    flex-direction: row;
    padding-top: 80rpx;
    padding-bottom: 50rpx;
  }
}
</style>
